<template>
	<view id="work">
		<view>
			<view id="header">
				<text v-for="(item1,index) in typeList.list" @click="handTypeChildren(item1,index)"
					:class="flag==index?'a':'active'" :key="index">{{item1.name}}</text>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view v-for="(item,index) in typeChildren.list" class="scroll-view-item_H"
					@click="handclickflag2(item,index)" :class="flag1==index?'active1':''" :key="index">
					<view class="imgs">
						<image src="../../static/logo.png"></image>
					</view>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="contenx">
			<view v-for="item2 in zhaopianall.list" :key="item2._id" @click="handClickItem(item2.imgid,item2)">
				<workItemVue :item='item2'>

				</workItemVue>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import workItemVue from '../../components/workItem/workItem.vue';
	// 生命周期
	onMounted(() => {
		gettype()
		getzhaopianAll()
	})


	let typeList = reactive({
		list: []
	})
	// 获取分类
	let gettype = () => {
		uni.request({
			url: 'http://localhost:3000/web/gethunshatype',
			data: '',
			method: 'GET',
			success: res => {
				// console.log(res.data.data)
				// Object.assign(typeList, res.data.data)
				typeList.list = res.data.data
				// console.log(typeList.list)

			handTypeChildren(typeList.list[0], 0)
			},
			fail: (err) => {
				console.log('请求失败')
			}
		})

	}
	// 样片 客片 样式切换
	let flag = ref(0)
	let flag1 = ref(0)
	// 点击给子组件传值
	let typeChildren = reactive({
		list: [],
	})
	// 获取全部分类
	let handTypeChildren = (list, i) => {
		typeChildren.list = list.children
		flag.value = i
		// console.log(zhaopianall.listcopy)
		zhaopianall.list = zhaopianall.listcopy.filter(ele => {
			return ele.type[0] == list.name
		})
		// console.log(zhaopianall.list)
	}
	// 类别按钮点击
	let handclickflag2 = (item, index) => {
		// console.log(item, index)
		flag1.value = index
		zhaopianall.list = zhaopianall.listcopy.filter(ele => {
			return ele.type[1] == item.name
		})
		// console.log(zhaopianall.list)
	}
	let zhaopianall = reactive({
		list: [],
		listcopy: []
	})
	// 获取所有照片
	let getzhaopianAll = async () => {
		uni.request({
			url: 'http://localhost:3000/app/gethunsha',
			success: (res) => {
				zhaopianall.list = res.data.data
				zhaopianall.listcopy = res.data.data
				zhaopianall.list=zhaopianall.list.filter(ele => {
					return ele.type[0] == '样片'
				})
			}
		})
	}
	// 点击跳转到详情
	let handClickItem = (imgs,item) => {
		uni.setStorage({
			key: 'item',
			data: JSON.stringify(item),
			success: () => {
				
			}
		});
		
		uni.setStorage({
			key: 'imgs',
			data: JSON.stringify(imgs),
			success: () => {
				console.log('img存储成功')
			}
		});
		
		uni.navigateTo({
			url: `/pages/zhaopianitem/zhaopianitem`,
			success: () => {
				console.log(2222)
			}
		})
		

	}
</script>

<style lang="scss" scoped>
	#work {
		width: 760rpx;
		background-color: #FAFAFA;
	}


	#header {
		width: 760rpx;
		height: 90rpx;
		// background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			width: 140rpx;
			text-align: center;
			font-weight: 600;
		}

		.active {
			color: #ADADAD;
		}

	}


	.scroll-view_H {
		white-space: nowrap;
		width: 760rpx;
		height: 170rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;

		.active1 {
			color: #005093;

			.imgs {
				// border: 6rpx solid ;
				box-shadow: #005093 1rpx 1rpx 12rpx 2rpx;
			}
		}

		.scroll-view-item_H {
			display: inline-block;
			// background-color: red;
			margin-top: 10rpx;
			width: 152rpx;
			height: 152rpx;
			text-align: center;
			font-size: 20rpx;
			box-sizing: border-box;

			.imgs {
				margin: 0 auto;
				width: 107rpx;
				height: 107rpx;
				background-color: #EEEEEE;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: #Fff 10rpx solid;
					box-sizing: border-box;
				}
			}

			text {
				display: inline-block;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}

	.contenx {
		width: 760rpx;
		display: flex;
		justify-content: space-between;
	}
</style>